<template>
  <el-group-title :title="groupTitle">
    <template slot="groupTitle">
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="oneLineTableData"
          :fit="true"
          border
          :show-summary="showSummary"
          :summary-method="getSummaries"
          class="ccui-multifunctional-table"
          :cell-style="cellStyle"
          @row-click="handleRowClick"
          :row-class-name="
            highlightRow && Object.keys(highlightRow).length
              ? tableRowClassName
              : ''
          "
        >
          <el-table-column label="序号" width="50" fixed>
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <template v-for="(table, index) in tableTheadOptions">
            <el-table-column
              :fixed="table.fixed || false"
              :key="index"
              :type="table.type"
              :label="table.label"
              :min-width="table.width"
              :prop="table.prop"
              :align="table.align || 'left'"
              :header-align="table.headerAlign || 'left'"
              :filters="table.filters"
              :formatter="table.formatter"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                <el-tooltip
                  v-if="row[table.showTooltipStatus]"
                  effect="dark"
                  :content="tooltipContent(row, table.label)"
                  placement="top"
                >
                  <span>{{ row[table.prop] }}</span>
                </el-tooltip>
                <span v-else>{{ row[table.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <slot name="operation" />
        </el-table>
      </div>
    </template>
  </el-group-title>
</template>

<script>
import { setToFixed } from "@/basa/utils";
export default {
  name: "oneLineTable",
  props: {
    groupTitle: {
      type: String,
      default: ""
    },
    // 是否需要合计
    showSummary: {
      type: Boolean,
      default: false
    },
    // 需要计算合计的字段
    summaryArr: {
      type: Array,
      default: () => []
    },
    // 表头
    tableTheadOptions: {
      type: Array,
      default: () => []
    },
    // 表数据
    oneLineTableData: {
      type: Array,
      default: () => []
    },
    // 需要高亮的字段
    highlightNodeArr: {
      type: Array,
      default: () => []
    },
    // 需要高亮的行
    highlightRow: {
      type: Object,
      default: () => {}
    }
  },
  created() {
    console.log(this, 666666);
  },
  methods: {
    // 高亮行
    tableRowClassName({ row }) {
      if (row[this.highlightRow.key] === this.highlightRow.value) {
        return "success-row";
      } else {
        return "";
      }
    },

    // 根据返回状态显示不同的文字颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.highlightNodeArr.includes(column.property)) {
        return { color: "#0089EF", cursor: "pointer" };
      }
    },

    // 行点击事件
    handleRowClick(row, column, event) {
      if (this.highlightNodeArr.includes(column?.property)) {
        this.$emit("gotoDetail", row);
      }
    },

    tooltipContent(row, str) {
      if (/单位/.test(str)) {
        return `单位转换设置：${row.baseProportion} ${row.baseMeasuringUnit} = ${row.currentProportion} ${row.currentMeasuringUnit}`;
      }
    },

    //合计列算法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (this.summaryArr.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                let num = new this.$BigNumber(prev).plus(curr);
                return setToFixed(
                  num,
                  column.label.search("数量") >= 0 ? 3 : 2
                );
              } else {
                return Number(prev);
              }
            }, 0);
          }
          // else {
          //     sums[index] = "——";
          //   }
        }
      });

      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper .el-table {
  td,
  th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
  // 固定行的高
  .el-table__fixed {
    height: 100% !important;
  }
}
// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
</style>
